<template>
  <div class="scene_box">
    <h3>动画渲染循环</h3>
    <div class="canvas"></div>
  </div>
</template>
    
    <script setup>
import { nextTick } from "vue";
import * as THREE from "three";
// 引入threejs 的扩展库  相机轨道控件
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import mian from "../../js/chapterTwo/faxian.js"
nextTick(() => {
  // ******************创建一个场景*************
let className = '.canvas'
  const scene = new THREE.Scene();
  // const geometry = new THREE.BoxGeometry(80, 80, 80);
  // const material = new THREE.MeshLambertMaterial({
  //   color: 0x00ffa0,
  //   transparent: false,
  //   opacity: 0.5,
  // });
  // const mian = new THREE.Mesh(geometry, material);
  mian.position.set(0, 0, 0);
  scene.add(mian);
  const xyz = new THREE.AxesHelper(100);
  scene.add(xyz);
  // ****************添加光源*********************
  // ####################### 点光源 ###################################

  const light = new THREE.PointLight(0xffffff, 1);
  // 光照强度
  light.intensity = 20.0;
  light.decay = 0.0;
  light.position.set(50, 0, 50);
  const lightHelper = new THREE.PointLightHelper(light, 12);
  scene.add(lightHelper);

  // ############################# 环境光 ################################

  // const ambient = new THREE.AmbientLight(0xffffff, 0.4);
  // scene.add(ambient);

  // ########################### 平行光 ####################################
  // const dirLight = new THREE.DirectionalLight(0xffff, 1.0);

  // dirLight.position.set(100, 70, 50);
  // dirLight.target = mian; 
  // scene.add(dirLight);

  // const dirLightHelper = new THREE.DirectionalLightHelper(
  //   dirLight,
  //   10,
  //   0xff0000
  // );
  // scene.add(dirLightHelper);
  // *****************照相机******************
  const width = 800;
  const height = 500;
  const camera = new THREE.PerspectiveCamera(30, width / height, 0.1, 3000);
  camera.position.set(200, 200, 200);
  camera.lookAt(mian.position);

  // *****************渲染器*****canvas*************
  const renderer = new THREE.WebGLRenderer({
    antialias: true, //是否执行抗锯齿，默认不抗false
  });
  renderer.setSize(width, height);
  const Dom = document.querySelector(className);
  Dom.appendChild(renderer.domElement);
 
  //******************创建一个相机控件***************
  const cintrols = new OrbitControls(camera, renderer.domElement);
  renderer.render(scene, camera);
  cintrols.addEventListener("change",function(){
  renderer.render(scene, camera);

  })

  // ********************* 动画 *** 渲染循环 *********************************
  /**
   * 旋转动画
   * */
  // function rotate() {
    // mian.rotateY(0.005);
    // renderer.render(scene, camera);
    // requestAnimationFrame(rotate);
  // }
  // rotate();
   renderer.setPixelRatio(window.devicePixelRatio);
});
</script>
    
    
    <style lang="scss" scoped>
</style>